<template>
    <div>
		<el-tabs type="border-card" class="demo-tabs" v-model="activeName" @tab-click="handleClick" v-cloak>
			<transition name="el-fade-in">
				<el-tab-pane label="样品信息审核" name="first" >
					<SampleTable
						v-show="activeName==='first'" 
						ref="samMan" 
						:Edit="tableName"
					>
					</SampleTable>
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="样品出入库" name="second">
					<SampleTable v-show="activeName==='second'" ref="samIns" :Edit="tableName">
					</SampleTable>
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="样品领用&退回审核" name="third">
					<ReceiptAndReturn v-show="activeName==='third'" ref="samRec" :Edit="tableName">
					</ReceiptAndReturn>
					<!-- <SampleTable v-show="activeName==='third'" ref="samRec" :Edit="Edit">
					</SampleTable> -->
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="领退详情" name="fouth">
					<ReceiptAndReturn v-show="activeName==='fouth'" ref="recMan" :Edit="tableName">
					</ReceiptAndReturn>
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="样品清退" name="fifth">
					<SampleTable v-show="activeName==='fifth'" ref="samRem" :Edit="tableName">
					</SampleTable>
				</el-tab-pane>
			</transition>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { pa } from 'element-plus/es/locale';
import { ref,reactive,onMounted,onActivated } from 'vue';
import SampleTable from '../../views/sample/components/sample_table.vue'
import ReceiptAndReturn from './components/receiptAndreturn.vue'
import type { TabsPaneContext } from 'element-plus'
import useSample from '../../hooks/Sample/useSample'

const { getSample } = useSample()
const activeName = ref('first')
const tableName=ref("samMan")
const samMan=ref()
const samIns=ref()
const samRec=ref()
const recMan=ref()
const samRem=ref()

const handleClick = (tab: TabsPaneContext, event: Event) => {
	if(tab.props.name === "first"){
		activeName.value==tab.props.name
		samMan.value.reload()
		tableName.value="samMan"
	}else if(tab.props.name === "second"){
		activeName.value==tab.props.name
		samIns.value.reload()
		tableName.value="samIns"
	}else if(tab.props.name === "third"){
		activeName.value==tab.props.name
		samRec.value.reload()
		tableName.value="samRec"
	}else if(tab.props.name === "fouth"){
		activeName.value==tab.props.name
		recMan.value.reload()
		tableName.value="recMan"
	}else if(tab.props.name === "fifth"){
		activeName.value==tab.props.name
		samRem.value.reload()
		tableName.value="samRem"
	}
}	

interface TableItem { 
	id: number;
	project_id: string;
	client_id: string;
	sample_id: string;
	sample_name: string;
	lot_number: string;
	size: string;
	sample_amount: number;
	arrive_time: string;
	instock_time: string;
	create_time: string;
	status:number;
}

onActivated(()=>{
	activeName.value='first'
	tableName.value="samMan"
	samMan.value.reload()
})

</script>

<style scoped >
.search-box {
	margin-bottom: 20px;
}

.search-input {
	width: 200px;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}

/* .scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(1.01);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(0.99);
} */
</style>
